<template>

  <!-- 概览统计 -->
  <el-row>
    <!-- :span="6"  每列宽度 -->
    <el-col :span="6">
      <el-statistic :value="this.summaryData.activityOngoingCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
          </div>
        </template>
        <template #suffix>/{{ this.summaryData.activityTotalCount }}</template>
      </el-statistic>
    </el-col>

    <el-col :span="6">
      <el-statistic title="线索总数" :value="this.summaryData.clueTotalCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="客户总数" :value="this.summaryData.customerTotalCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic :value="this.summaryData.tranSuccessAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            交易总额
          </div>
        </template>
        <template #suffix>/{{ this.summaryData.tranTotalAmount }}</template>
      </el-statistic>
    </el-col>
  </el-row>

  <!-- 销售漏斗图 -->
  <div id="saleFunnelChart">
    销售漏斗图渲染在这里
  </div>

  <!-- 线索来源统计饼图 -->
  <div id="clueSourcePieChart">
    线索来源统计饼图渲染在这里
  </div>

  <!-- 市场活动数据统计柱状图 -->
  <div id="activityBarChart">
    市场活动数据统计柱状图渲染在这里
  </div>

  <!-- 市场活动数据统计柱状图 -->
  <div id="tranLineChart">
    交易数据统计折线图渲染在这里
  </div>

</template>

<script>
  // 引入ECharts图表库
  import * as echarts from 'echarts';

  import {doGet} from "../http/httpRequest.js";
  import {messageTip} from "../util/util.js";

  export default {
    name: "StatisticView",

    data() {
      return {
        // 概览统计对象
        summaryData: { }
      }
    },

    // 钩子函数，渲染完成后自动执行
    mounted() {
      // 加载概览统计数据
      this.loadSummaryData();

      // 加载销售漏斗图
      this.loadSaleFunnelChart();

      // 加载线索来源统计饼图
      this.loadClueSourcePieChart();

      // 加载市场活动数据统计柱状图
      this.loadActivityBarChart();

      // 交易数据统计折线图
      this.loadTranLineChart();
    },

    methods: {
      // 加载概览统计数据
      loadSummaryData() {
        // 向后端发送请求
        doGet("/api/statistic/summary/data", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.summaryData = resp.data.data;
          } else {
            messageTip("概览统计数据加载失败", "error");
          }
        })
      },

      // 加载销售漏斗图
      loadSaleFunnelChart() {
        // 向后端发送请求
        doGet("/api/statistic/saleFunnelChart/data", { }).then( (resp) => {
          if (resp.data.code === 200) {

            // 先查询数据，然后再渲染图表。（没有数据先渲染图表，渲染不出来）

            // 获取后端返回的数据，赋值给销售漏斗图数据集合
            let saleFunnelChartDataList = resp.data.data;

            // 1、获取页面上渲染图表的dom元素
            let chartDom = document.getElementById('saleFunnelChart');
            // 2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
            let myChart = echarts.init(chartDom);

            // 3、配置可选项（查看文档 --> 配置项手册）
            let option = {
              // 标题组件，包含主标题和副标题
              title: {
                // 主标题文本，支持使用 \n 换行
                text: '销售漏斗图',
                // 标题距离左侧位置：居中
                left: 'center',
                // 标题距离上侧位置：底部
                top: 'bottom'
              },
              // 提示框组件
              tooltip: {
                // 触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                trigger: 'item',
                // 提示框浮层内容格式器，漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: '{a} <br/>{b} : {c}'
              },
              // 工具栏（漏斗图右上角的工具）
              toolbox: {
                // 各工具配置项
                feature: {
                  // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                  dataView: {
                    // 是否不可编辑
                    readOnly: false
                  },
                  // 配置项还原
                  restore: {},
                  // 保存为图片
                  saveAsImage: {}
                }
              },
              // 图例组件
              legend: {
                // 图例的数据数组（漏斗图上面的数据选项）
                data: ['线索', '客户', '交易', '成交']
              },
              // 系列
              series: [
                {
                  // 系列名称
                  name: '销售漏斗数据统计',
                  // 图表类型：漏斗图
                  type: 'funnel',
                  // 漏斗图组件离容器左侧的距离
                  left: '10%',
                  // 漏斗图组件离容器上侧的距离
                  top: 60,
                  // 漏斗图组件离容器下侧的距离
                  bottom: 60,
                  // 漏斗图组件的宽度
                  width: '80%',
                  // 指定的数据最小值
                  min: 0,
                  // 指定的数据最大值
                  max: 100,
                  // 数据最小值 min 映射的宽度
                  minSize: '0%',
                  // 数据最大值 max 映射的宽度
                  maxSize: '100%',
                  // 数据排序，可以取 'ascending'，'descending'，'none'（表示按 data 顺序）
                  sort: 'descending',
                  // 数据图形间距
                  gap: 2,
                  // 漏斗图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                  label: {
                    show: true,
                    // 标签的位置
                    position: 'inside'
                  },
                  // 标签的视觉引导线样式，在 label 位置 设置为 left 或者 right 的时候会显示视觉引导线
                  labelLine: {
                    // 视觉引导线的长度
                    length: 10,
                    lineStyle: {
                      // 线宽
                      width: 1,
                      // 线的类型
                      type: 'solid'
                    }
                  },
                  // 图形样式
                  itemStyle: {
                    // 图形颜色
                    borderColor: '#fff',
                    // 描边线宽。为 0 时无描边
                    borderWidth: 1
                  },
                  // 高亮的标签和图形样式
                  emphasis: {
                    // 文字的字体系列
                    label: {
                      // 字体大小
                      fontSize: 20
                    }
                  },
                  // 数据项（系列中的数据内容数组，可以为单个数值，也可以是对象值）
                  /*data: [
                    // 数据项的值 和 数据项名称
                    { value: 20, name: '成交' },
                    { value: 60, name: '交易' },
                    { value: 80, name: '客户' },
                    { value: 100, name: '线索' }
                  ]*/
                  data: saleFunnelChartDataList
                }
              ]
            };

            // 4、如果配置了可选项，就把可选项设置到空白的图表对象中
            option && myChart.setOption(option);

          } else {
            messageTip("销售漏斗图数据加载失败", "error");
          }
        })
      },

      // 加载线索来源统计饼图
      loadClueSourcePieChart() {

        // 先查询数据，然后再渲染图表，否则没有数据图表渲染不出来
        // 向后端发送请求
        doGet("/api/statistic/clueSourcePieChart/data", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据，赋值给线索来源统计集合
            let clueSourcePieChartDataList = resp.data.data;

            // 1、获取页面上渲染图表的dom元素
            let chartDom = document.getElementById('clueSourcePieChart');
            // 2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
            let myChart = echarts.init(chartDom);
            // 3、配置可选项（查看文档 --> 配置项手册）
            let option = {
              title: {
                text: '线索来源统计',
                left: 'center',
                top: 'bottom'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'horizontal',
                left: 'center'
              },
              series: [
                {
                  name: '线索来源数据',
                  type: 'pie',
                  radius: '50%',
                  /*data: [
                    { value: 104, name: 'Search Engine' },
                    { value: 735, name: 'Direct' }
                  ],*/
                  data: clueSourcePieChartDataList,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            // 4、如果配置了可选项，就把可选项设置到空白的图表对象中
            option && myChart.setOption(option);

          } else {
            messageTip("线索来源统计加载失败", "error");
          }
        })
      },

      // 加载市场活动数据统计柱状图
      loadActivityBarChart() {

        // 先查询数据，然后再渲染图表，否则没有数据图表渲染不出来
        // 向后端发送请求
        doGet("/api/statistic/activityBarChart/data", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 获取后端返回的数据
            let activityBarChartDataList = resp.data.data;
            // 定义一个月份活动数量数组（依次是一到十二月）
            let monthCount = [];
            for (let key in activityBarChartDataList) {
              // 取出每月的市场活动数量
              monthCount.push(activityBarChartDataList[key].value);
            }

            // 1、获取页面上渲染图表的dom元素
            let chartDom = document.getElementById('activityBarChart');
            // 2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
            let myChart = echarts.init(chartDom);
            // 3、配置可选项（查看文档 --> 配置项手册）
            let option = {
              // 标题组件，包含主标题和副标题
              title: {
                // 主标题文本，支持使用 \n 换行
                text: '市场活动数据统计柱状图',
                // 标题距离左侧位置：居中
                left: 'center',
                // 标题距离上侧位置：底部
                top: 'bottom'
              },
              // 提示框组件
              tooltip: {
                // 触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                trigger: 'item',
                // 提示框浮层内容格式器，漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: '{a} <br/>{b} : {c}'
              },
              xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '市场活动数量',
                  // data: [120, 280, 150, 80, 70, 110, 130, 12],
                  data: monthCount,
                  type: 'bar'
                }
              ]
            };

            // 4、如果配置了可选项，就把可选项设置到空白的图表对象中
            option && myChart.setOption(option);

          } else {
            messageTip("市场活动数据统计柱状图加载失败", "error");
          }
        })
      },

      // 加载交易数据统计折线图
      loadTranLineChart() {

        // 先查询数据，然后再渲染图表，否则没有数据图表渲染不出来
        // 向后端发送请求
        doGet("/api/statistic/tranLineChart/data", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 获取后端返回的数据
            let tranLineChartDataList = resp.data.data;
            // 定义月份交易金额数组（一到十二月）
            let monthMoney = [];
            for (let key in tranLineChartDataList) {
              // 取出每月的交易金额
              monthMoney.push(tranLineChartDataList[key].value);
            }

            // 1、获取页面上渲染图表的dom元素
            let chartDom = document.getElementById('tranLineChart');
            // 2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
            let myChart = echarts.init(chartDom);
            // 3、配置可选项（查看文档 --> 配置项手册）
            let option = {
              // 标题组件，包含主标题和副标题
              title: {
                // 主标题文本，支持使用 \n 换行
                text: '交易数据统计折线图',
                // 标题距离左侧位置：居中
                left: 'center',
                // 标题距离上侧位置：底部
                top: 'bottom'
              },
              // 提示框组件
              tooltip: {
                // 触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                trigger: 'item',
                // 提示框浮层内容格式器，漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: '{a} <br/>{b} : {c}'
              },
              xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '交易金额',
                  // data: [120, 280, 150, 80, 70, 110, 130, 12],
                  data: monthMoney,
                  type: 'line'
                }
              ]
            };

            // 4、如果配置了可选项，就把可选项设置到空白的图表对象中
            option && myChart.setOption(option);

          } else {
            messageTip("交易数据统计折线图加载失败", "error");
          }
        })
      }
    }
  }
</script>

<style scoped>

  /* 统计栏 */
  .el-row {
    text-align: center;   /* 内容居中 */
  }

  /* 销售漏斗图 */
  #saleFunnelChart {
    width: 48%;           /* 宽度 */
    height: 350px;        /* 高度 */
    margin-top: 40px;     /* 上侧外边距 */
    float: left;          /* 浮动：使元素向左移动，其周围的元素也会重新排列，给两个块级元素同时设置，可以实现块级元素的并排显示 */
  }

  /* 线索来源统计饼图 */
  #clueSourcePieChart {
    width: 48%;           /* 宽度 */
    height: 350px;        /* 高度 */
    margin-top: 40px;     /* 上侧外边距 */
    float: left;          /* 浮动：使元素向左移动，其周围的元素也会重新排列，给两个块级元素同时设置，可以实现块级元素的并排显示 */
  }

  /* 市场活动数据统计柱状图 */
  #activityBarChart {
    width: 100%;          /* 宽度 */
    height: 350px;        /* 高度 */
    margin-top: 40px;     /* 上侧外边距 */
    float: left;          /* 浮动：使元素向左移动，其周围的元素也会重新排列，给两个块级元素同时设置，可以实现块级元素的并排显示 */
  }

  /* 交易数据统计折线图 */
  #tranLineChart {
    width: 100%;           /* 宽度 */
    height: 350px;        /* 高度 */
    margin-top: 40px;     /* 上侧外边距 */
    float: left;          /* 浮动：使元素向左移动，其周围的元素也会重新排列，给两个块级元素同时设置，可以实现块级元素的并排显示 */
  }

</style>

